<template>
  <div>
    <!--轮播图-->
    <el-card class="box-card">
      <el-carousel indicator-position="outside" style="text-align: center">
        <el-carousel-item v-for="item in 5" :key="item" :label="item">
          <el-image style="width: 100% " :src="require(`@/assets/img/banner/${item}.jpg`)" fit="contain"></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-card>
    <!--轮播图-->
    <el-card class="box-card">
      <el-row :gutter="16" type="flex" justify="start">
        <el-col :span="24" v-for="(item,index) in authorList" :key="index" class="author-container">
          <div class="author-div">
            <el-image style="width: 100%" :src="require(`@/assets/img/homeAuthor/${item.name}.jpg`)"></el-image>
            <p class="title">{{ item.name }}</p>
            <div class="mask">{{ item.jianjie }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!--推荐诗词-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>推荐诗词</span>
      </div>
      <el-row style="padding: 0 10px;flex-wrap: wrap" :gutter="16" type="flex" justify="space-between"
              v-loading="loading">
        <span v-for="(item,index) in suggestPoem" :key="index" class="suggestion-item text-overflow">
          [{{ item.authors?.adynasty }}]<a @click="goAuthorItem(item.authors.aid,item.authors?.aname )"
                                           href="javascript:;">{{ item.authors?.aname }}</a>  &nbsp;
          《<a @click="goPoemItem(item.pid,item.ptitle)" href="javascript:;">{{ item?.ptitle }}</a>》
        </span>
      </el-row>
    </el-card>
  </div>

</template>

<script>
import {reqGetHomeSuggestion} from '@/API/modules/home'
import router from '@/router'

export default {
  name: "Home",
  data() {
    return {
      suggestPoem: [],
      authorList: [{
        name: '辛弃疾',
        jianjie: '辛弃疾（1140－1207），南宋词人。原字坦夫，改字幼安，别号稼轩，汉族，历城（今山东济南）人。出生时，中原已为金兵所占。21岁参加抗金义军，不久归南宋。'
      }, {
        name: '苏轼',
        jianjie: '苏轼（1037年1月8日-1101年8月24日）字子瞻、和仲，号铁冠道人、东坡居士，世称苏东坡、苏仙，汉族，眉州眉山（四川省眉山市）人，祖籍河北栾城，北宋著名文学家、书法家、画家，历史治水名人。'
      }, {
        name: '杜甫',
        jianjie: '杜甫（712－770），字子美，自号少陵野老，世称“杜工部”、“杜少陵”等，汉族，河南府巩县（今河南省巩义市）人，唐代伟大的现实主义诗人，杜甫被世人尊为“诗圣”，其诗被称为“诗史”。'
      }, {
        name: '李白',
        jianjie: '李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”。'
      }, {
        name: '白居易',
        jianjie: '白居易（772年－846年），字乐天，号香山居士，又号醉吟先生，祖籍太原，到其曾祖父时迁居下邽，生于河南新郑。'
      },],
      loading: true,
    }
  },
  methods: {
    goPoemItem(pid, bread) {
      //在出发地印上目的地的名字
      this.$route.meta.toBreadName = bread;
      router.push(`/poemItem/${pid}`)
    },
    goAuthorItem(pid, bread) {
      //在出发地印上目的地的名字
      this.$route.meta.toBreadName = bread;
      router.push(`/authorItem/${pid}`)
    },
  },
  mounted() {
    reqGetHomeSuggestion().then((res) => {
      this.suggestPoem = res.data.data
      this.loading = false;
    })
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  background-color: #fff;
  margin-bottom: 20px;
  text-align: left;

  .author-container {
    position: relative;

    &:hover .author-div {
      top: -10px;
    }


    .author-div {
      transition: all .2s .1s;
      overflow: hidden;
      position: relative;
      top: 0;
    }

    .title {
      margin: 0;
      text-align: center;
      background-color: #fff;
      position: relative;
      z-index: 5;
      overflow: hidden
    }


    &:hover .mask {
      top: 0;
      opacity: 1;
    }

    .mask {
      overflow: hidden;
      transition: all .13s 0s;
      position: absolute;
      top: 100px;
      left: 0;
      color: rgba(199, 203, 199, 0.97);
      width: 100%;
      height: 89%;
      background-color: rgba(82, 81, 81, 0.74);
      opacity: 0;
    }
  }
}

.suggestion-item {
  display: inline-block;
  width: 48%;
  height: 35px;
  line-height: 35px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>